<template>
    <view class="custom-tabbar-wrapper">
        <view class="custom-tabbar">
            <view class="tab-item" v-for="(item, index) in list" :key="index" @click="switchTab(index)">
                <image
                    :src="currentSelected === index ? item.selectedIconPath : item.iconPath"
                    :class="[currentSelected === index ? 'animated-image' : '', 'icon']"
                />
                <text :style="{ color: currentSelected === index ? selectedColor : color }">
                    {{ item.text }}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        selected: {
            type: Number,
            default: 0
        },
        list: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            color: '#C4C4C4',
            selectedColor: '#0066FF'
        };
    },
    computed: {
        currentSelected() {
            return this.selected;
        }
    },
    methods: {
        switchTab(index) {
            this.$emit('change', index);
        }
    }
};
</script>

<style lang="scss" scoped>
.custom-tabbar-wrapper {
    position: fixed;
    bottom: 20rpx;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20rpx;
    background: transparent;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.custom-tabbar {
    width: 100%;
    height: 110rpx;
    display: flex;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.05);
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rpx 0;

    .icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 3rpx;
    }

    text {
        font-size: 20rpx;
        line-height: 28rpx;
        font-weight: 400;
    }
}
.animated-image {
    animation: popAndShake 1.2s ease-in-out;
}

@keyframes popAndShake {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.5); // 放大到1.2倍
    }
    50% {
        transform: scale(1); // 恢复原始大小
    }
    70% {
        transform: scale(1) translateX(0); // 准备晃动
    }
    75% {
        transform: scale(1.2) translateX(-5px); // 向左晃
    }
    85% {
        transform: scale(1.2) translateX(5px); // 向右晃
    }
    95% {
        transform: scale(1) translateX(-2px); // 轻微向左
    }
    100% {
        transform: scale(1) translateX(0); // 恢复原位
    }
}
</style>